<script setup defer async lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { points } from '@/api/user'
import { useI18n } from 'vue-i18n'
import { formatDate,convertNumbers } from '@/utils/utils'
import { useSwipeHandlers } from '@/utils/useSwipeHandlers'
const { t } = useI18n()
const country=ref(1);
	const exchangeRate=ref(1);
	const symbol = ref('$')

const baseData = reactive({
  condition: [0, 0],
  loading: false,
  page: 1,
  total: 0,
  typesList: [
    { label: 'All types', value: 0 },
    { label: 'Bind WS Account', value: 1 },
    { label: 'Idle Task', value: 2 },
    { label: 'QR Code Task', value: 3 },
    { label: 'Spin the Wheel Activity', value: 4 },
    { label: 'Invite New Task', value: 5 },
    { label: 'Manual Activity Reward', value: 6 },
    { label: 'Group Task', value: 7 },
    { label: 'Referral Activity', value: 8 },
    { label: 'Online Earnings (Fixed Idle Activity)', value: 11 },
    { label: 'Idle Rebate', value: 12 },
    { label: 'Treasure Hunt Activity Expense', value: 13 },
    { label: 'Treasure Hunt Activity Earnings', value: 14 },
    { label: 'New User Task Earnings', value: 15 },
    { label: 'Book Mark', value: 16 },
	 { label: 'Sign up bonus', value: 17 },
  ],
  timeList: ['All time', 'Today', 'Yesterday', 'In the past seven days'],
  dataList: [],
  aircraftUrl: uni.getStorageSync('aircraftUrl'),
  isContinueGetList: true,
})
const getTi = (change_type_id: any) => {
  return baseData.typesList.filter((item: any) => item.value == change_type_id)[0].label
}
const uDropdownRef = ref(null)
const changTypes = (index: any) => {
  uDropdownRef.value?.close()
  baseData.condition[0] = index
  baseData.dataList = []
  baseData.page = 1
  baseData.isContinueGetList = true
  getList()
}
const changTime = (index: any) => {
  uDropdownRef.value?.close()
  baseData.condition[1] = index
  baseData.dataList = []
  baseData.page = 1
  baseData.isContinueGetList = true
  getList()
}
const leftClick = () => {
  window.top?.postMessage('/pages/user/index', window.location.origin)
  uni.navigateTo({
    url: '/pages/user/index',
  })
}
const handleScroll = () => {
  getList()
}
const getList = async () => {
  if (!baseData.isContinueGetList) return
  baseData.loading = true
  uni.showLoading({
    title: t('Loading'),
    icon: 'none',
  })
  let params: any = {
    page: baseData.page,
    change_type: baseData.condition[0],
    time_types: baseData.condition[1],
    pageSize: 20,
  }
  
  const res = await points(params)
  if (res.code == 0) {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
    
    baseData.total = res.data.total
    if (res.data.list.length > 0) {
		baseData.dataList = baseData.dataList.concat(res.data.list)
      baseData.page++
    }
    if (baseData.total <= (baseData.page - 1) * params.pageSize) {
      baseData.isContinueGetList = false
    }
    baseData.loading = false
    uni.hideLoading()
  } else {
    baseData.loading = false
    uni.hideLoading()
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }
}

const handleSwipeRight = () => {
  const pages = getCurrentPages()
  if (pages.length <= 1) {
    history.back()
  } else {
    uni.navigateBack()
  }
}
useSwipeHandlers(handleSwipeRight)
onMounted(() => {
  
  uni.setNavigationBarTitle({
    title: 'Studio ' + t('Earn money so easy') + '!', 
  })
  symbol.value = uni.getStorageSync('symbol') || '₹'; 
  		country.value=uni.getStorageSync('country') || 1;
  		exchangeRate.value=uni.getStorageSync('exchangeRate') || 1;
  getList()
})
</script>

<template>
  <view class="revenue-page-container">

	<up-navbar :title="t('Revenue record')" @click="leftClick" :autoBack="true">
						<template #left>
						  <view class="nav-back-btn">
						    <image class="back-icon" src="../../../static/img/left.png"></image>
						  </view>
						</template>
					</up-navbar>
    
    <view class="header-section">
      <view class="title-section">
        <text class="main-title">{{t('Detail of the proceeds')}}</text>
       
      </view>
      <view class="chart-3d">
        <view class="chart-body">
          <view class="chart-bars">
            <view class="bar bar-1"></view>
            <view class="bar bar-2"></view>
            <view class="bar bar-3"></view>
            <view class="bar bar-4"></view>
          </view>
          <view class="chart-line"></view>
        </view>
      </view>
    </view>

    
<!--    <view class="filter-section">
      <up-dropdown ref="uDropdownRef" active-color="#333" title-size="0.8rem" menu-icon="arrow-down-fill">
        <up-dropdown-item :title="t(getTi(baseData.condition[0]))">
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.typesList"
                :class="baseData.condition[0] == item.value ? 'citems' : 'items'"
                :key="item.value"
                @click="changTypes(item.value)"
              >
                {{ t(item.label) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
        <up-dropdown-item :title="t(baseData.timeList[baseData.condition[1]])"  active-color="#333" >
          <view class="slot-content">
            <view class="up-text-center up-content-color up-m-t-20 up-m-b-20" style="background: #fff; padding: 0.4rem">
              <view
                v-for="(item, index) in baseData.timeList"
                :class="baseData.condition[1] == index ? 'citems' : 'items'"
                :key="index"
                @click="changTime(index)"
              >
                {{ t(item) }}
              </view>
            </view>
          </view>
        </up-dropdown-item>
      </up-dropdown>
    </view> -->
    
    
    <view class="revenue-list-section">
      <view class="list-container">
        <up-list @scrolltolower="handleScroll" style="height: 100%">
          <up-list-item v-show="baseData.dataList.length != 0" v-for="(item, index) in baseData.dataList" :key="index">
            <view class="revenue-item">

              <view class="item-content">
                <view class="item-info">
                  <text class="item-title">{{ t(getTi(item.change_type_id)) }}</text>
                  <text class="item-time">{{ item.UpdatedAt.split('.')[0].replace('T', ' ') }}</text>
                </view>
              </view>
              <view class="item-amount">
                <text class="amount-value">{{symbol}} {{convertNumbers(item.change_points,exchangeRate)}}</text>
              </view>
            </view>
          </up-list-item>
          
          <view class="list-end-text" v-show="!baseData.loading && baseData.dataList.length != 0">
            {{ t('Reached the End') }}
          </view>
         
          <view class="empty-state" v-show="baseData.dataList.length === 0 && !baseData.loading">
            <view class="empty-icon">
              <img src="@/static/img/empty120.png"/>
            </view>
            <text class="empty-text">{{ t('No Data') }}</text>
          </view>
        </up-list>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.revenue-page-container {
  min-height: 100vh;
  background: linear-gradient(180deg, #e8f5e8 0%, #ffffff 100%);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
}



.header-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40px 30px 30px;
  padding-top: 50px;
  
  .title-section {
    flex: 1;
    
    .main-title {
      display: block;
      font-size: 20px;
      font-weight: 900;
      color: #000;
      letter-spacing: -0.5px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  }
  
  .chart-3d {
    width: 120px;
    height: 80px;
    position: relative;
    
    .chart-body {
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
      border-radius: 8px;
      position: relative;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 12px;
      
      .chart-bars {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        height: 100%;
        
        .bar {
          width: 12px;
          background: linear-gradient(180deg, #4CAF50 0%, #8BC34A 100%);
          border-radius: 2px;
          position: relative;
          
          &.bar-1 {
            height: 30%;
          }
          
          &.bar-2 {
            height: 60%;
          }
          
          &.bar-3 {
            height: 45%;
          }
          
          &.bar-4 {
            height: 75%;
          }
        }
      }
      
      .chart-line {
        position: absolute;
        top: 8px;
        left: 8px;
        right: 8px;
        height: 2px;
        background: #4CAF50;
        border-radius: 1px;
        opacity: 0.6;
      }
    }
  }
}

.filter-section {
  padding: 0 30px 20px;
  
  ::v-deep .u-dropdown {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    .u-dropdown__content {
      height: 94vh !important;
    }
    
    .u-m-t-20,
    .up-m-t-20 {
      margin-top: 0px !important;
    }
  }
}

.revenue-list-section {
  position: relative;
  z-index: 1;
  flex: 1;
  padding: 0 10px 10px;
}

.list-container {
  width: 100%;
  height: 100%;
}

.revenue-item {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #4CAF50 0%, #8BC34A 100%);
    border-radius: 12px 0 0 12px;
  }
}



.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.item-title {
  font-size: 16px;
  color: #333;
  font-weight: 600;
  line-height: 1.4;
}

.item-time {
  font-size: 13px;
  color: #666;
  font-weight: 400;
}

.item-amount {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  min-width: 120px;
  flex-shrink: 0;
}

.amount-value {
  font-size: 20px;
  color: #4CAF50;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.list-end-text {
  width: 100%;
  text-align: center;
  color: #666;
  margin: 30px 0;
  font-size: 14px;
  font-weight: 400;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  margin: 20px;

  .empty-icon {
    margin-bottom: 20px;
    opacity: 0.4;
    color: #64748b;
    filter: grayscale(1);
    
    img {
      width: 60px;
      height: 60px;
    }
  }

  .empty-text {
    font-size: 16px;
    color: #64748b;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
}


::v-deep .up-list-item {
  margin-bottom: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;

  .u-list-item {
    padding: 0;
    background: transparent;

    .u-list-item__content {
      padding: 0;
      
      .u-list-item__content__main {
        padding: 0;
        
        .u-list-item__content__main__desc {
          padding: 0;
          margin: 0;
        }
      }
    }
  }
}


</style>